import 'package:blurb/common/values/images.dart';
import 'package:blurb/common/values/svg.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';

class MessagePage extends StatelessWidget {
  const MessagePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 背景图片固定在底部
          Positioned.fill(
            child: Image.asset(MIP.background, fit: BoxFit.cover),
          ),
          // 内容部分
          Column(
            children: [
              // 固定在顶部的标题栏
              SafeArea(
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.w),
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      // 居中的标题
                      Center(
                        child: Text(
                          'Message',
                          style: GoogleFonts.racingSansOne(
                            fontSize: 24.sp,
                            fontWeight: FontWeight.normal,
                            color: Colors.white,
                          ),
                        ),
                      ),
                      // 右侧的通知图标
                      Positioned(
                        right: 0,
                        child: Icon(MSI.clear, color: Colors.white),
                      ),
                    ],
                  ),
                ),
              ),
              Divider(color: Colors.white.withOpacity(0.2), height: 1.h),
              
              // 可滚动的内容部分
              Expanded(
                child: CustomScrollView(
                  slivers: [
                    // Chat标题
                    SliverToBoxAdapter(
                      child: Padding(
                        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            Text(
                              'Chat',
                              style: GoogleFonts.racingSansOne(
                                fontSize: 22.sp,
                                fontWeight: FontWeight.normal,
                                color: Colors.white,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    
                    // 头像列表
                    SliverToBoxAdapter(
                      child: SizedBox(
                        height: 90.h,
                        child: ListView.builder(
                          scrollDirection: Axis.horizontal,
                          itemCount: 8,
                          itemBuilder: (context, index) {
                            return Stack(
                              children: [
                                Container(
                                  width: 70.w,
                                  height: 70.h,
                                  margin: EdgeInsets.only(left: 15.w),
                                  padding: EdgeInsets.all(4.w),
                                  decoration: BoxDecoration(
                                    color: const Color(0xFF1F1F21),
                                    shape: BoxShape.circle,
                                    border: Border.all(
                                      color: const Color(0xFF60C3FF).withOpacity(0.7),
                                      width: 1.5.w,
                                    ),
                                  ),
                                  child: Image.asset(
                                    MIP.avatar,
                                    fit: BoxFit.contain,
                                  ),
                                ),
                                Positioned(
                                  bottom: 20.h,
                                  right: 0,
                                  child: Container(
                                    width: 24.w,
                                    height: 24.h,
                                    decoration: BoxDecoration(
                                      gradient: LinearGradient(
                                        begin: Alignment(0.50, 0.00),
                                        end: Alignment(0.50, 0.96),
                                        colors: [
                                          const Color(0xFF60C3FF),
                                          const Color(0xFFAADEFC),
                                        ],
                                      ),
                                      shape: BoxShape.circle,
                                    ),
                                    child: Icon(
                                      MSI.add,
                                      color: Colors.white,
                                      size: 16.sp,
                                    ),
                                  ),
                                ),
                              ],
                            );
                          },
                        ),
                      ),
                    ),
                    
                    // 消息列表
                    SliverList(
                      delegate: SliverChildBuilderDelegate(
                        (context, index) {
                          return Container(
                            margin: EdgeInsets.symmetric(horizontal: 16.w, vertical: 5.h),
                            decoration: BoxDecoration(
                              color: const Color(0xFF1F1F21),
                              borderRadius: BorderRadius.circular(12.r),
                              border: Border.all(
                                color: Colors.white.withOpacity(0.2),
                              ),
                            ),
                            padding: EdgeInsets.symmetric(
                              horizontal: 16.w,
                              vertical: 10.h,
                            ),
                            child: Row(
                              children: [
                                Container(
                                  width: 60.w,
                                  height: 60.h,
                                  decoration: BoxDecoration(
                                    color: const Color(0xFF1F1F21),
                                    shape: BoxShape.circle,
                                    image: DecorationImage(
                                      image: AssetImage(MIP.avatar),
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                ),
                                SizedBox(width: 10.w),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      'Mindu', 
                                      style: GoogleFonts.racingSansOne(
                                        fontSize: 16.sp,
                                        fontWeight: FontWeight.normal,
                                        color: Colors.white,
                                      ),
                                    ),
                                    SizedBox(height: 5.h),
                                    Text(
                                      'Hello, how are you?', 
                                      style: GoogleFonts.inter(
                                        fontSize: 14.sp,
                                        fontWeight: FontWeight.normal,
                                        color: Colors.white.withOpacity(0.7),
                                      ),
                                    ),
                                  ],
                                ),
                                Spacer(),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: [
                                    Text(
                                      "3 minutes ago", 
                                      style: GoogleFonts.inter(
                                        fontSize: 14.sp,
                                        fontWeight: FontWeight.normal,
                                        color: Colors.white.withOpacity(0.7),
                                      ),
                                    ),
                                    SizedBox(height: 8.h),
                                    Container(
                                      width: 24.w,
                                      height: 24.h,
                                      decoration: BoxDecoration(
                                        color: const Color.fromARGB(255, 239, 124, 75),
                                        shape: BoxShape.circle,
                                      ),
                                      child: Center(
                                        child: Text(
                                          "1",
                                          style: GoogleFonts.inter(
                                            fontSize: 16.sp,
                                            fontWeight: FontWeight.bold,
                                            color: Colors.white,
                                          ),
                                        ),
                                      ),
                                    )
                                  ],
                                )
                              ],
                            ),
                          );
                        },
                        childCount: 3,
                      ),
                    ),
                    SliverToBoxAdapter(child: SizedBox(height: 10.h)),
                    
                    // Group Chat标题
                    SliverToBoxAdapter(
                      child: Padding(
                        padding: EdgeInsets.symmetric(horizontal: 16.w),
                        child: Row(
                          children: [
                            Text(
                              "Group Chat", 
                              style: GoogleFonts.racingSansOne(
                                fontSize: 22.sp,
                                fontWeight: FontWeight.normal,
                                color: Colors.white,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    SliverToBoxAdapter(child: SizedBox(height: 10.h)),
                    
                    // 群组聊天列表
                    SliverList(
                      delegate: SliverChildBuilderDelegate(
                        (context, index) {
                          return Container(
                            margin: EdgeInsets.symmetric(horizontal: 16.w, vertical: 5.h),
                            decoration: BoxDecoration(
                              color: const Color(0xFF1F1F21),
                              borderRadius: BorderRadius.circular(10.r),
                              border: Border.all(
                                color: Colors.white.withOpacity(0.1),
                              ),
                            ),
                            padding: EdgeInsets.symmetric(
                              horizontal: 16.w,
                              vertical: 10.h,
                            ),
                            child: Row(
                              children: [
                                Stack(
                                  children: [
                                    // 设置一个占位容器，确保Stack有足够的尺寸
                                    Container(
                                      width: 70.w,
                                      height: 60.h,
                                      color: Colors.transparent,
                                    ),
                                    // 居中放置添加图标
                                    Positioned.fill(
                                      child: Center(
                                        child: Icon(
                                          MSI.add,
                                          size: 16.sp,
                                          color: Colors.white.withOpacity(0.7),
                                        ),
                                      ),
                                    ),
                                    // 左上角图片
                                    Positioned(
                                      top: 0,
                                      left: 0,
                                      child: Image.asset(
                                        MIP.empty,
                                        width: 28.w,
                                        height: 28.h,
                                      ),
                                    ),
                                    // 右上角图片
                                    Positioned(
                                      top: 0,
                                      right: 0,
                                      child: Image.asset(
                                        MIP.empty,
                                        width: 28.w,
                                        height: 28.h,
                                      ),
                                    ),
                                    // 左下角图片
                                    Positioned(
                                      bottom: 0,
                                      left: 0,
                                      child: Image.asset(
                                        MIP.empty,
                                        width: 28.w,
                                        height: 28.h,
                                      ),
                                    ),
                                    // 右下角图片
                                    Positioned(
                                      bottom: 0,
                                      right: 0,
                                      child: Image.asset(
                                        MIP.empty,
                                        width: 28.w,
                                        height: 28.h,
                                      ),
                                    ),
                                  ],
                                ),
                                SizedBox(width: 10.w),
                                Text(
                                  'Sun-proof Research\nInstitute',
                                  style: GoogleFonts.inter(
                                    fontSize: 14.sp,
                                    fontWeight: FontWeight.normal,
                                    color: Colors.white,
                                  ),
                                ),
                                Spacer(),
                                Container(
                                  padding: EdgeInsets.symmetric(
                                    horizontal: 18.w,
                                    vertical: 6.h,
                                  ),
                                  decoration: BoxDecoration(
                                    gradient: LinearGradient(
                                      begin: Alignment(0.50, 0.00),
                                      end: Alignment(0.50, 0.96),
                                      colors: [
                                        const Color(0xFF60C3FF),
                                        const Color(0xFFAADEFC),
                                      ],
                                    ),
                                    borderRadius: BorderRadius.circular(37.r),
                                  ),
                                  child: Text(
                                    'Chat',
                                    style: GoogleFonts.racingSansOne(
                                      fontSize: 18.sp,
                                      fontWeight: FontWeight.normal,
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          );
                        },
                        childCount: 3,
                      ),
                    ),
                    // 底部留出空间
                    SliverToBoxAdapter(child: SizedBox(height: 100.h)),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
